<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/three/three.js"></script>
</head>
<body>
    <script>
        // 创建3D场景对象Scene
        const scene = new THREE.Scene();
       
        const width = window.innerWidth;
        const height = window.innerHeight;
        // 实例化一个透视投影相机对象
        const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
        //相机在Three.js三维坐标系中的位置
        // 根据需要设置相机位置具体值
        camera.position.set(0,0,120);

        // 创建渲染器对象Renderer
        const renderer = new THREE.WebGLRenderer();

        // 设置渲染器的尺寸
        renderer.setSize(width,height);
        // 将渲染器中的内容添加到body中
        document.body.appendChild(renderer.domElement);
        //添加立方体
        const geometry = new THREE.PlaneBufferGeometry(10,10,2,2);
        // 创建纹理加载器
        const textureLoader = new THREE.TextureLoader();
        // 加载纹理贴图
        textureLoader.load('./assets/grass.png',function(texture){
            // 创建材质
            const lambert = new THREE.MeshLambertMaterial({
                map:texture
            });
            // 创建一个网格模型对象Mesh
            const mesh =  new THREE.Mesh(geometry,lambert);
            scene.add(mesh);
            // 点光源
            const spotLight = new THREE.SpotLight(0xffffff)
            //点光源位置
            spotLight.position.set(-10, 10, 98);//点光源放在x轴上
            scene.add(spotLight); //点光源添加到场景中
            // 使用渲染器，通过相机将场景渲染进来
            renderer.render(scene,camera);
        })
      

        // const animation = function(){
        //     // 使用渲染器，通过相机将场景渲染进来
        //     renderer.render(scene,camera);
        //     requestAnimationFrame(animation);
        // }
        // animation();
    </script>
</body>
</html>